<template>
    <div>
        <h2 class="title">小组</h2>
        <div class="day">{{ year }}年{{ month }}月{{ day }}日星期五{{ week }}</div>
        <div class="teamList">
            <div class="teamList-left">
                <div class="teamList-left-title">
                    <div>
                        <img src="@/assets/bgimg.png" alt="">
                        <h5>{{ teamList.title }}

                            <p>{{ teamList.summary }}</p>
                        </h5>

                    </div>

                    <div class="bottom">
                        <div class="creatTime"><i class="el-icon-s-order"></i>创建于{{ teamList.createTime }}</div>
                        <div class="tag">
                            <el-tag size="mini" effect="plain" type="warning" color="rgba(255, 171, 43, 0.08)" hit>{{
                                    teamList.tag.tagName
                            }}
                            </el-tag>
                        </div>
                    </div>
                </div>
            </div>
            <div class="teamList-right">
                <div class="teamList-right-data">
                    <h5>项目数据</h5>
                    <div class="quota">名额</div>
                    <div class="counting">{{ teamList.counting }}</div>

                </div>
                <div class="teamList-right-member">
                    <el-button round class="teamList-right-member-button" plain>申请加入</el-button>
                    <div class="statusName">状态</div>
                    <el-tag size="mini" effect="plain" type="warning" color="rgba(255, 171, 43, 0.08)" class="status">{{
                            teamList.status
                    }}</el-tag>

                </div>
            </div>
        </div>
        <div class="teamList">
            <div class="teamList-left">
                <div class="teamList-left-title">
                    <div>
                        <img src="@/assets/bgimg.png" alt="">
                        <h5>{{ teamList.title }}

                            <p>{{ teamList.summary }}</p>
                        </h5>

                    </div>

                    <div class="bottom">
                        <div class="creatTime"><i class="el-icon-s-order"></i>创建于{{ teamList.createTime }}</div>
                        <div class="tag">
                            <el-tag size="mini" effect="plain" type="warning" color="rgba(255, 171, 43, 0.08)" hit>{{
                                    teamList.tag.tagName
                            }}
                            </el-tag>
                        </div>
                    </div>
                </div>
            </div>
            <div class="teamList-right">
                <div class="teamList-right-data">
                    <h5>项目数据</h5>
                    <div class="quota">名额</div>
                    <div class="counting">{{ teamList.counting }}</div>

                </div>
                <div class="teamList-right-member">
                    <el-button round class="teamList-right-member-button" plain>申请加入</el-button>
                    <div class="statusName">状态</div>
                    <el-tag size="mini" effect="plain" type="warning" color="rgba(255, 171, 43, 0.08)" class="status">{{
                            teamList.status
                    }}</el-tag>

                </div>
            </div>
        </div>
        <div class="teamList">
            <div class="teamList-left">
                <div class="teamList-left-title">
                    <div>
                        <img src="@/assets/bgimg.png" alt="">
                        <h5>{{ teamList.title }}

                            <p>{{ teamList.summary }}</p>
                        </h5>
                    </div>
                    <div class="bottom">
                        <div class="creatTime"><i class="el-icon-s-order"></i>创建于{{ teamList.createTime }}</div>
                        <div class="tag">
                            <el-tag size="mini" effect="plain" type="warning" color="rgba(255, 171, 43, 0.08)" hit>{{
                                    teamList.tag.tagName
                            }}
                            </el-tag>
                        </div>
                    </div>

                </div>
            </div>
            <div class="teamList-right">
                <div class="teamList-right-data">
                    <h5>项目数据</h5>
                    <div class="quota">名额</div>
                    <div class="counting">{{ teamList.counting }}</div>

                </div>
                <div class="teamList-right-member">
                    <el-button round class="teamList-right-member-button" plain>申请加入</el-button>
                    <div class="statusName">状态</div>
                    <el-tag size="mini" effect="plain" type="warning" color="rgba(255, 171, 43, 0.08)" class="status">{{
                            teamList.status
                    }}</el-tag>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getTeam } from '@/api/team'
export default {
    name: 'team',
    data() {
        return {
            year: new Date().getFullYear(),
            month: new Date().getMonth() + 1,
            day: new Date().getDay() - 1,
            weeks: new Date().getDay(),
            week: '',
            teamList: {
                id: 1,
                title: "",
                summary: "",
                createTime: "",
                originatorId: "",
                teamPic: null,
                counting: null,
                status: "",
                tag: [
                    {
                        tagId: null,
                        tagName: ""
                    }
                ]
            }
        }

    },
    created() {
        this.getTeamInfo()
    },
    props: {

    },
    components: {
    },
    mounted() {

    },
    methods: {
        getWeek() {
            if (this.weeks == 0) {
                this.week = '日'
            } else if (this.weeks == 1) {
                this.week = '一'
            } else if (this.weeks == 2) {
                this.week = '二'
            } else if (this.weeks == 3) {
                this.week = '三'
            } else if (this.weeks == 4) {
                this.week = '四'
            } else if (this.weeks == 5) {
                this.week = '五'
            } else {
                this.week = '六'
            }
        },
        getTeamInfo() {
            getTeam().then((res) => {
                this.teamList = res.data.data[0]
            }).catch((err) => {
                console.log(err);
            });
        }

    }
}
</script>

<style scoped lang="less">
.title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 0px;
    color: rgba(10, 22, 41, 1);
    text-align: left;
    vertical-align: top;

}

.day {
    margin-top: 3vh;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.39px;
    line-height: 0px;
    color: rgba(120, 121, 147, 1);
    text-align: left;
    vertical-align: top;
    text-align: center;
    margin-bottom: 3vh;
}

.teamList {
    width: 48vw;
    height: 17vh;
    border-radius: 24px;
    background: rgba(213, 237, 161, 1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    margin: 3vh 0;
    padding: 1vh;
    box-sizing: border-box;

    &-left {
        float: left;
        width: 49%;
        height: 100%;
        border-right: 2px solid rgba(13, 128, 120, 1);
        box-sizing: border-box;
        padding: 1vh;

        &-title {
            img {
                width: 5vw;
                height: 7vh;
                float: left;
            }

            h5 {
                display: inline-block;
                height: 8vh;
                font-size: 16px;
                font-weight: 700;
                letter-spacing: 0px;
                // line-height: 7vh;
                color: rgba(10, 22, 41, 1);
                text-align: center;
                margin-top: -10vh;
                margin-left: 1vw;

                p {
                    display: block;
                    margin-top: 3vh;
                    font-size: 12px;
                    font-weight: 300;
                    letter-spacing: 0px;
                    line-height: 0px;
                    color: rgba(145, 146, 158, 1);
                    text-align: left;
                    white-space: normal;
                    display: inline-block;
                }

            }

            .creatTime {
                margin-top: -3vh;
                margin-left: 1vw;
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 16px;
                color: rgba(125, 133, 146, 1);
                float: left;

                i {
                    font-size: 18px;
                    vertical-align: bottom;
                    margin-right: 3px;

                }
            }

            .tag {
                float: right;
                margin-right: 2vw;
                margin-top: -24px;
            }
        }
    }

    &-right {
        float: right;
        height: 100%;
        width: 49%;

        &-data {
            float: left;
            margin-left: 1vw;

            .quota {
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 0px;
                color: rgba(145, 146, 158, 1);
                text-align: left;
                vertical-align: top;
            }

            .counting {
                margin-left: 5px;
                margin-top: 2vh;
                font-size: 16px;
                font-weight: 700;
                letter-spacing: 0px;
                line-height: 24px;
                color: rgba(10, 22, 41, 1);
                text-align: left;
                vertical-align: top;
            }
        }

        &-member {
            float: right;

            &-button {
                width: 122px;

                margin-right: 1vw;
                margin-top: 2vh;
                background: rgba(13, 128, 120, 1);
                color: #fff;
                font-size: 14px;
                font-weight: 400;
                padding: 10px;

                &:hover {
                    background: rgba(13, 128, 120, 1);
                    color: #fff;
                    width: 124px;
                    font-size: 14px;
                    font-weight: 500;
                    box-shadow: 0px 6px 12px 0px rgba(63, 140, 255, 0.26);
                }

                &:active {
                    background: rgba(13, 128, 120, 1);
                    color: #fff;
                    width: 122px;
                    font-size: 14px;
                    font-weight: 500;
                    ;
                }
            }

            .statusName {
                margin-top: 3vh;
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 0px;
                color: rgba(145, 146, 158, 1);
                text-align: left;
                vertical-align: top;
            }

            .status {
                margin-top: 2vh;
                text-align: center;
            }

        }
    }
}
</style>
